<template>
  <div>
    {{ titleArr }}
    {{ list }}
    <nav-bar :title="titleArr"></nav-bar>
    <nav-content :list="list"></nav-content>
  </div>
</template>
<script lang="ts">
/**
 * vue2 created
 *      mounted
 *      updated
 *      destoryed
 *
 * vue数据双向绑定原理（vue2 vue3）
 */
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  onMounted, //  dom挂载完毕 => nextTick 用在onMounted生命周期中
  onUpdated, //  更新生命周期
  onUnmounted, // 卸载组件->取消定时器/取消自定义事件/取消发布订阅模式
  computed
} from 'vue'
import NavBar from './components/NavBar/index.vue'
import NavContent from './components/NavContent/index.vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  name: 'vue3-demo',
  components: {
    NavBar,
    NavContent
  },
  props: {},
  data() {
    return {}
  },
  // created() {},
  // 合成api=> compositionApi
  // setup 执行时机？
  /**
   * 1. setup 参数 props, context 且参数不能解构
   * 2. setup中无this
   * 3. props: 接收父组件传递的参数
   * 4. context: 上下文，this
   * 5. setup 相当于created生命周期
   */
  setup(props, context) {
    // 1. 定义数据 (proxy 响应式数据)
    const state = reactive({
      msg: '你好，我是Vue3的足迹',
      options: { page: 1, size: 2 }
    })
    const inputRef = ref('')
    const store = useStore()
    const route = useRoute()
    const router = useRouter()

    // 请求接口=> 1.  回调模式，可以解决异步
    // store.dispatch('fetch_title', (data: any[]) => {
    //   console.log('data:', data)
    // }) // 请求登陆接口 跳转路由
    // router.push('/about')
    store.dispatch('fetch_title').then((res) => {
      console.log('res:-------->', res)
      // router.push('/about')
    }) // 请求登陆接口 跳转路由
    store.dispatch('fetch_list', state.options)

    // vuex拿数据，必须使用 computed 计算属性接收

    const titleArr = computed(() => {
      return store.state.titleArr
    })
    const list = computed(() => {
      return store.state.list
    })

    console.log('list:------2', list)

    setTimeout(() => {
      state.msg = '我是更改后的数据'
      console.log('state:', state)
      console.log('...state:', { ...state })
    }, 1000)

    // setup抛出数据不能直接解构，但是可以借助vue3提供的其他方法解构->toRefs
    const { msg } = toRefs(state)
    console.log('msg:', msg)
    return {
      titleArr,
      list,
      msg,
      state,
      inputRef
    }
  }
})
</script>
